<template>
  <div class="IndexConatiner">
    <div class="headcont">
      <!--走马灯开始-->
      <el-carousel
        class="carousel"
        arrow="always"
        :autoplay="true"
        :loop="true"
        indicator-position="none"
        :initial-index="itemidex"
        @change="carouselChange"
      >
        <el-carousel-item v-for="(item, index) in bannerList" :key="index">
          <div class="topcont">
            <el-image
              class="carouselImg"
              :src="item.img"
              fit="cover"
            ></el-image>
            <div class="descCont">
              <p class="title">{{ item.title }}</p>
              <p class="desc">{{ item.desc }}</p>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
      <!--走马灯结束-->
      <!--导航开始-->
      <div class="navDiv">
        <ul class="top_ul f">
          <li
            class="top_li f fc"
            :class="{ active: navindex == index }"
            v-for="(item, index) in navList"
            :key="index"
            @click="changeIndex(index)"
          >
            {{ item.name }}
          </li>
        </ul>
        <div class="bot f fb">
          <input type="text" placeholder="姓名" class="inputp" />
          <input type="text" placeholder="联系号码" class="inputp" />
          <el-select v-model="type" placeholder="资讯服务类型" class="inputp1">
            <el-option
              v-for="item in navList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <p class="contact f fc">立即联系</p>
        </div>
      </div>
    </div>
    <!--导航结束-->
    <!--企业成长计划-->
    <div class="indexCont">
      <p class="bigTitle">企业成长计划</p>
      <p class="smallTitle">多种增值服务让琐碎工作轻松完成</p>
      <div class="contRepot">
        <swiper
          :options="swiperOption1"
          ref="mySwiper"
          class="index_ul rearrow"
        >
          <swiper-slide
            class="index_li"
            v-for="(item, index) in 4"
            :key="index"
          >
            <el-image
              class="topimg"
              src="../../static/images/bbi/zz3.jpg"
              fit="cover"
            ></el-image>
            <div class="botcont">
              <p class="bigTitle1">基础服务</p>
              <p class="cont">
                工商代理 /记账与报税 /政策咨询 /法务 /人力资源/记账与 报税
                /政策咨询 /法务 /人力资源/
              </p>
            </div>
          </swiper-slide>
          <div class="swiper-button-prev" slot="button-prev"></div>
          <div class="swiper-button-next" slot="button-next"></div>
        </swiper>
      </div>
    </div>
    <!-- 舒适的办公环境 -->
    <div class="indexCont">
      <p class="bigTitle">舒适的办公环境</p>
      <p class="smallTitle">设施齐全，入住即开工 丨 休闲多样，助办公更高效</p>
      <div class="contRepot">
        <swiper
          :options="swiperOption1"
          ref="mySwiper"
          class="index_ul rearrow"
        >
          <swiper-slide
            class="index_li"
            v-for="(item, index) in 4"
            :key="index"
          >
            <div class="recont">
              <el-image
                class="bgimg"
                src="../../static/images/bbi/zz2.jpg"
                fit="cover"
              ></el-image>
              <div class="botcont">
                <p class="bigTitle1">基础服务</p>
                <p class="cont">
                  工商代理 /记账与报税 /政策咨询 /法务 /人力资源/记账与 报税
                  /政策咨询 /法务 /人力资源/
                </p>
              </div>
            </div></swiper-slide
          >
          <div class="swiper-button-prev" slot="button-prev"></div>
          <div class="swiper-button-next" slot="button-next"></div>
        </swiper>
      </div>
    </div>
    <!--新闻资讯-->
    <div class="indexCont">
      <p class="bigTitle">新闻资讯</p>
      <p class="smallTitle">随时掌握孵化器动态，了解国家优惠政策</p>
      <div class="contRepot">
        <swiper
          :options="swiperOption1"
          ref="mySwiper"
          class="index_ul rearrow"
        >
          <swiper-slide
            class="index_li"
            v-for="(item, index) in 4"
            :key="index"
          >
            <el-image
              class="topimg"
              src="../../static/images/bbi/zz3.jpg"
              fit="cover"
            ></el-image>
            <div class="botcont">
              <p class="bigTitle1">
                战役情∣北航天汇企业系列报道——履坦科技 公共场所消毒机器人
              </p>
              <p class="bot f fb">
                <span class="date">2020-02-03</span>
                <span class="detail">查看详情></span>
              </p>
            </div>
          </swiper-slide>
          <div class="swiper-button-prev" slot="button-prev"></div>
          <div class="swiper-button-next" slot="button-next"></div>
        </swiper>
      </div>
    </div>
    <!--空间展示-->
    <div class="indexContSwiper">
      <div class="cont">
        <p class="bigTitle">空间展示</p>
        <p class="smallTitle">随时掌握孵化器动态，了解国家优惠政策</p>
      </div>
      <swiper :options="swiperOption" ref="mySwiper" class="mySwiper">
        <swiper-slide
          class="service_li"
          v-for="(item, index) in 6"
          :key="index"
        >
          <el-image
            class="swiperImg"
            src="../../static/images/bbi/zb1.jpg"
            fit="cover"
          ></el-image>
        </swiper-slide>
        <div class="swiper-button-prev" slot="button-prev"></div>
        <div class="swiper-button-next" slot="button-next"></div>
      </swiper>
    </div>
    <!--专业的导师团队-->
    <div class="indexCont">
      <p class="bigTitle">专业的导师团队</p>
      <p class="smallTitle">
        为您所需提供您所选，打造您专属的办公室，还有多种活动空间，会议室，设备齐全。
      </p>
      <ul class="teacher_ul f">
        <li class="teacher_li" v-for="(item, index) in 4" :key="index">
          <el-image
            class="teacherImg"
            src="../../static/images/bbi/zz5.jpg"
            fit="cover"
          ></el-image>
          <p class="name">郝爱民</p>
          <p class="desc">北京航空航天大学 博士、讲师</p>
        </li>
      </ul>
    </div>
    <!--园区位置-->
    <div class="indexContSwiper">
      <div class="cont">
        <p class="bigTitle">园区位置</p>
        <p class="smallTitle">
          为您所需提供您所选，打造您专属的办公室，还有多种活动空间，会议室，设备齐全。
        </p>
      </div>
      <swiper :options="swiperOption" ref="mySwiper" class="mySwiper">
        <swiper-slide
          class="service_li"
          v-for="(item, index) in 6"
          :key="index"
        >
          <el-image
            class="swiperImg"
            src="../../static/images/bbi/zb1.jpg"
            fit="cover"
          ></el-image>
        </swiper-slide>
        <div class="swiper-button-prev" slot="button-prev"></div>
        <div class="swiper-button-next" slot="button-next"></div>
      </swiper>
    </div>
    <!--期待加入-->
    <div class="indexCont3">
      <img src="../../static/images/bbi/icon3.png" alt="" />
    </div>
  </div>
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
export default {
  components: {
    swiper,
    swiperSlide
  },
  data () {
    return {
      // 空间展示和园区位置设置的swiper参数
      swiperOption: {
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
        spaceBetween: 30,
        slidesPerView: 3,
        autoplay: 1000
      },
      // 办公环境及新闻资讯成长计划swiper参数
      swiperOption1: {
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
        slidesPerView: 3,
        spaceBetween: 30
      },
      // 导航
      navList: [
        { id: 1, name: '数字孵化' },
        { id: 2, name: '舒适办公' },
        { id: 3, name: '增值服务' },
        { id: 4, name: '导师团队' },
        { id: 5, name: '园区景色' },
        { id: 6, name: '热点资讯' }
      ],
      navindex: 0,
      type: '', // 资讯服务类型
      itemidex: 0, // banner索引
      // banner
      bannerList: [
        {
          id: 0,
          img: '../../static/images/bbi/banner1.jpg',
          title: '数字孵化',
          desc:
            '人工智能全链条孵化体系和硬科技孵化服务平台，建立服务流程与标准，创建战略新兴产业源头企业 专业化服务模式'
        },
        {
          id: 1,
          img: '../../static/images/bbi/banner2.jpg',
          title: '舒适办公',
          desc:
            '人工智能全链条孵化体系和硬科技孵化服务平台，建立服务流程与标准，创建战略新兴产业源头企业 专业化服务模式 专业化服务模式'
        },
        {
          id: 2,
          img: '../../static/images/bbi/banner3.jpg',
          title: '增值服务',
          desc:
            '人工智能全链条孵化体系和硬科技孵化服务平台，建立服务流程与标准，创建战略新兴产业源头企业 专业化服务模式 专业化服务模式'
        },
        {
          id: 3,
          img: '../../static/images/bbi/banner1.jpg',
          title: '导师团队',
          desc:
            '人工智能全链条孵化体系和硬科技孵化服务平台，建立服务流程与标准，创建战略新兴产业源头企业 专业化服务模式 专业化服务模式'
        },
        {
          id: 4,
          img: '../../static/images/bbi/banner2.jpg',
          title: '园区景色',
          desc:
            '人工智能全链条孵化体系和硬科技孵化服务平台，建立服务流程与标准，创建战略新兴产业源头企业 专业化服务模式 专业化服务模式'
        },
        {
          id: 5,
          img: '../../static/images/bbi/banner3.jpg',
          title: '热点资讯',
          desc:
            '人工智能全链条孵化体系和硬科技孵化服务平台，建立服务流程与标准，创建战略新兴产业源头企业 专业化服务模式 专业化服务模式'
        }
      ]
    }
  },
  mounted () {},
  methods: {
    changeIndex (index) {
      this.navindex = index
      this.itemidex = index
    },
    // 轮播索引 当前索引和旧的索引
    carouselChange (key1, key2) {
      this.itemidex = key1
      this.navindex = key1
    }
  }
}
</script>
<style lang="scss" scoped>
@import "../assets/css/main.scss";
@import "../assets/css/common.scss";
</style>
